<template>
  <el-dialog
    :close-on-click-modal="false"
    width="1200px"
    :title="$t('m.sigin.noticesigin')"
    :visible.sync="popupVisible"
    :before-close="close"
  >
    <!-- 根据通知单号查询明细 start-->
    <el-form align="left" :model="formInline" label-width="120px" @submit.native.prevent>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('m.notice.noticenumber')">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.noticenumber" ref="searchNoticeNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-button
            type="primary"
            @click="search"
            v-if="hasPermission('table-noticenumber')"
          >{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 根据通知单号查询明细 end-->
    <hr />

    <!-- 根据通知单号返显明细 start-->
    <el-form align="left" :model="detail" label-width="120px" v-if="formVisible" size="mini">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.notice.noticenumber')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.noticenumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.ordernumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.typename')">
            <!-- 1 订单到货 2 第三方到货 3 退货到货 4其它 -->
            <el-input maxlength="20" show-word-limit v-model="typename" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.planeddate')">
            <el-input maxlength="20" show-word-limit v-model="planeddate" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.auditdate')">
            <el-input maxlength="20" show-word-limit v-model="auditdate" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.warehouse')">
            <el-input maxlength="20" show-word-limit v-model="$store.state.basicInfo.warehouseInfo.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.consignor')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.consignorname" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.suppliername')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.suppliername" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.deliverycompany')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.deliverycompany" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.platenumber')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.platenumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.deliveryman')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.deliveryman" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.contact')">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.contact" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('m.remark')">
            <el-input
              type="textarea"
              maxlength="100"
              show-word-limit
              v-model="detail.arrivalnoticeDto.remark"
              :rows="2"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 根据通知单号查询明细 end-->

    <!-- table start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      tooltip-effect="dark"
      :data="detail.arrivalnoticedetailList">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="productspeccode" label="sku"></el-table-column>
      <el-table-column align="center" prop="suppliercode" label="supplierCode"></el-table-column>
      <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
      <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')"></el-table-column>
      <el-table-column align="center" prop="plannedquantityfs" :label="$t('m.in.plannedquantity')"></el-table-column>
      <el-table-column align="center" prop="actualquantity" :label="$t('m.sigin.arrive')"></el-table-column>
      <el-table-column align="center" :label="$t('m.operation')">
        <template slot-scope="scope">
          <!-- btn：理货 -->
          <template v-if="scope.row.plannedquantityfs>scope.row.actualquantity">
            <template v-if="hasPermission('sign')">
              <el-button
                type="primary"
                @click="triggerSigning(scope.$index,scope.row,true)"
              >{{$t('m.sigin.sigin')}}</el-button>
            </template>
          </template>
          <!-- btn：理货 -->
          <!-- btn：查看理货结果 -->
          <template v-else>
            <template v-if="hasPermission('table-check')">
              <el-button
                size="mini"
                type="primary"
                @click="triggerSigning(scope.$index,scope.row,false)"
              >{{$t('m.sigin.result')}}</el-button>
            </template>
          </template>
          <!-- btn：查看理货结果 -->
        </template>
      </el-table-column>
    </el-table>
    <!-- table end -->
    <el-row v-show="formVisible">
      <el-col :span="24">
        <el-button @click="close">{{$t('m.close')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'signing-notice-popup',
  props:{
    popupVisible:{type:Boolean,default:false},
    actualquantity:{type:Number,default:-1},
    noticenumber:{type:String,default:''}
  },
  data(){
    return {
      formInline:{
        noticenumber:'' // 通知单号
      },
      remark:'',
      detail:{
        arrivalnoticeDto:{},
        arrivalnoticedetailList:[]
      },
      activeIndex:0
    }
  },
  mounted(){
    if (this.noticenumber){
      this.getData(this.noticenumber)
    } else {
      this.$nextTick(() => {
        this.$refs['searchNoticeNumber'].focus()
      })
    }
  },
  computed:{
    formVisible(){
      return Object.keys(this.detail.arrivalnoticeDto).length
    },
    typename(){
      return [
        this.lan('m.in.arrivaltype1'),
        this.lan('m.in.arrivaltype2'),
        this.lan('m.in.arrivaltype3'),
        this.lan('m.in.other')][this.detail.arrivalnoticeDto.typeid-1]
    },
    planeddate(){
      return common.timestampSimple(this.detail.arrivalnoticeDto.planeddate)
    },
    auditdate(){
      return common.timestampSimple(this.detail.arrivalnoticeDto.auditdate)
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    close(){
      this.formInline.noticenumber = ''
      this.detail = {}
      this.$emit('close')
    },
    search(){
      let noticenumber = this.formInline.noticenumber
      this.getData(noticenumber)
    },
    // 根据理货单号获取具体信息
    getData(noticenumber){
      if (!noticenumber) return this.callbackMessage(this.$t('m.enter') + this.$t('m.notice.noticenumber'))
      let options = {
        method:'get',
        url:`/signin/noticenumber/${noticenumber}`
      }
      this.$axios(options).then(({ data }) => {
        this.detail = data
      })
    },
    triggerSigning(index, row, flag){
      if (
        this.detail.arrivalnoticeDto.state === 1 ||
        this.detail.arrivalnoticeDto.state === 2
      )
        return this.callbackMessage(this.$t('m.sigin.uncheck'))
      this.activeIndex = index
      let completed = row.plannedquantityfs - row.actualquantity <= 0
      let noticenumber = this.detail.arrivalnoticeDto.noticenumber
      let { productspeccode:sku, actualquantity } = row
      let arg = { noticenumber, sku, actualquantity, completed }
      this.$emit('triggerSigning', arg, flag)
    }
  },
  watch:{
    actualquantity(){
      if(this.actualquantity!==-1){
        let target = this.detail.arrivalnoticedetailList[this.activeIndex]
        this.$set(target,'actualquantity',target.plannedquantityfs - this.actualquantity)
        this.$nextTick(()=>{
          this.$emit('initActualquantity') // 防止二次满签，没有触发actualquantity改变后的监听函数
        })
      }
    },
    noticenumber:{
      handler(){
        this.formInline.noticenumber = this.noticenumber
      },
      immediate:true
    }
  }
}
</script>